<!--
 * @Author: TJN tjn@246@126.com
 * @Date: 2024-03-27 23:20:32
 * @LastEditors: TJN tjn@246@126.com
 * @LastEditTime: 2024-03-27 23:46:24
 * @FilePath: \mapview\src\components\ParkingInformation.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="parking-container">
    <!-- 车位管理 -->
    <div class="parking-left">
      <div class="mb" style="width:100%;font-size:18px;"><span>车位总数</span><span style="color:#ff9900;font-size:18px;">{{ tongjiData.cheweizong }}/200</span></div>
      <div class="mb-view">
        <div class="mb"><span>新能源车位</span> <span class="color-white">{{ tongjiData.xinnengyuan }}/10</span></div>
        <div class="mb"><span>小型车车位</span> <span class="color-white">{{ tongjiData.xiaoxingche }}/10</span></div>
      </div>
      <div class="mb-view">
        <div class="mb"><span>大车车位</span> <span class="color-white">{{ tongjiData.daxingche }}/20</span></div>
        <div class="mb"><span>危险车车位</span> <span class="color-white">{{ tongjiData.weixian }}/30</span></div>
      </div>
      <div class="mb" style="width:calc(50% - 5px);"><span>牲畜车车位</span> <span class="color-white">{{ tongjiData.chusheng }}/40</span></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    tongjiData:{
      cheweizong:'74',
      xiaoxingche:'47',
      xinnengyuan:'3',
      daxingche:'20',
      weixian:'3',
      chusheng:'1',
      tingcheliang:'153',
      pingjunshichang:'3.2',
      shoufei:'0',
      gaofeng:'11:00-13:45',
    }
    };
  },
  components: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped>
.color-white {
  color: #fff;
}

.parking-container {
  color: #fff;
  display: flex;
  padding:5px 25px;
  padding-top:10px;
  padding-left:0px;
  /* flex-direction: column; */
}

.parking-left {
  display: flex;
  width: 100%;
  flex-direction: column;
  margin-top: 10px;

  /* align-items: center; */
}

.parking-title {
  text-align: left !important;
}
.mb-view{
  display: flex;
}
.mb {
  width:calc(50% - 5px);
  margin-bottom: 10px;
  display: flex;
  margin-right:5px;
  justify-content: space-between;
}
.color-white{
  color:#00FFFF;
}
</style>
